<template>
  <el-container class="time-sync-layout">
    <el-header class="time-sync-header">
      <div class="logo-area">
        <el-icon size="24px">
          <OfficeBuilding />
        </el-icon>
        <span class="company-name">不知道写什么，先来个时间吧</span>
      </div>
    </el-header>

    <el-main class="time-sync-main">
      <el-card class="time-card" shadow="hover">
        <template #header>
          <div class="card-header-title">
            <el-icon>
              <Sunrise />
            </el-icon>
            <span>当前北京时间 (CST)</span>
          </div>
        </template>

        <div class="time-container">
          <p class="date-text">
            {{ currentDate }}
          </p>

          <p class="time-display blue-text">
            {{ currentTime }}
          </p>

          <el-divider class="card-divider" />
          <p class="sub-text">该当牛马了。</p>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
// ** 导入 Vue 3 Composition API 的核心函数 **
import { ref, onMounted, onUnmounted, Ref } from 'vue';
// ** 导入 Element Plus 的图标 **
import { OfficeBuilding, Sunrise } from '@element-plus/icons-vue';

// ** 1. 定义响应式变量并明确类型 (TS: Ref<string>) **
const currentDate: Ref<string> = ref('');
const currentTime: Ref<string> = ref('');
let timer: number | null = null; // TS 中 setInterval 返回的 ID 通常是 number

// ** 2. 核心函数：获取并格式化时间 **
const updateTime = (): void => {
  // 明确使用 Date 对象
  const now: Date = new Date();

  // 格式化日期：YYYY年MM月DD日 星期X
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long',
    timeZone: 'Asia/Shanghai' // 明确指定北京时区
  });

  // 格式化时间：HH:mm:ss (精确到秒)
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false, // 24小时制
    timeZone: 'Asia/Shanghai' // 明确指定北京时区
  });
};

// ** 3. 生命周期钩子：启动计时器 **
onMounted(() => {
  updateTime(); // 立即运行一次
  // 每秒更新一次时间
  // TS 中需要明确 window.setInterval 的返回类型
  timer = window.setInterval(updateTime, 1000);
});

// ** 4. 生命周期钩子：清除计时器，防止内存泄漏
onUnmounted(() => {
  if (timer !== null) {
    window.clearInterval(timer);
  }
});
</script>

<style scoped>
.time-sync-layout {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

.time-sync-header {
  height: 60px;
  background-color: #ffffff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  padding: 0 30px;
}

.logo-area {
  display: flex;
  align-items: center;
  color: #303133;
}

.company-name {
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
  color: #409eff;
}

.time-sync-main {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.time-card {
  width: 90%;
  max-width: 550px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.card-header-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #606266;
}

.card-header-title .el-icon {
  margin-right: 8px;
  color: #f6984e;
}

.time-container {
  padding: 20px;
}

.date-text {
  font-size: 24px;
  color: #606266;
  margin-bottom: 20px;
}

.time-display {
  font-family: 'Digital', 'Arial', sans-serif;
  font-size: 110px;
  font-weight: 500;
  margin: 0;
  line-height: 1.1;
  letter-spacing: 2px;
}

/* **重点样式：蓝色字体** */
.blue-text {
  color: #409eff;
}

.card-divider {
  margin: 25px auto;
  width: 50%;
}

.sub-text {
  font-size: 14px;
  color: #909399;
}
</style>
